{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<PageHeader as |p|>
  <p.top>
    <KmipBreadcrumb @showPath={{true}} @currentRoute={{this.scope}} />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      {{this.scope}}
    </h1>
  </p.levelLeft>
</PageHeader>
<Toolbar>
  {{#if this.model.meta.total}}
    <ToolbarFilters>
      <NavigateInput
        @filterFocusDidChange={{action "setFilterFocus"}}
        @filterDidChange={{action "setFilter"}}
        @filter={{this.filter}}
        @filterMatchesKey={{this.filterMatchesKey}}
        @firstPartialMatch={{this.firstPartialMatch}}
        @placeholder="Filter roles by name"
        @extraNavParams={{this.scope}}
        @urls={{hash
          create="vault.cluster.secrets.backend.kmip.scope.roles.create"
          list="vault.cluster.secrets.backend.kmip.scope.roles"
          show="vault.cluster.secrets.backend.kmip.credentials"
        }}
      />
      {{#if this.filterFocused}}
        {{#if this.filterMatchesKey}}
          <p class="input-hint">
            <kbd>ENTER</kbd>
            to go to
            <code>{{this.filter}}</code>
            roles
          </p>
        {{/if}}
        {{#if this.firstPartialMatch}}
          <p class="input-hint">
            <kbd>TAB</kbd>
            to complete
            <code>{{this.firstPartialMatch.id}}</code>
          </p>
        {{/if}}
      {{/if}}
    </ToolbarFilters>
  {{/if}}
  <ToolbarActions>
    <ToolbarLink @route="scope.roles.create" @type="add" data-test-role-create>
      Create role
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>
<ListView @items={{this.model}} @itemNoun="role" @paginationRouteName="scope.roles" as |list|>
  {{#if list.empty}}
    <list.empty
      @title="No roles in this scope yet"
      @message="Roles let you generate credentials with a specified set of KMIP operations permissions that clients are allowed to perform."
    >
      <Hds::Link::Standalone @icon="plus" @text="Create a role" @route="scope.roles.create" />
    </list.empty>
  {{else if list.item}}
    <ListItem @linkPrefix={{this.mountPoint}} @linkParams={{array "credentials" this.scope list.item.id}} as |Item|>
      <Item.content>
        <Icon @name="user" class="has-text-grey-light" />{{list.item.id}}
      </Item.content>
      <Item.menu>
        <Hds::Dropdown @isInline={{true}} @listPosition="bottom-right" as |dd|>
          <dd.ToggleIcon @icon="more-horizontal" @text="More options" @hasChevron={{false}} data-test-popup-menu-trigger />
          <dd.Interactive @route="credentials" @models={{array this.scope list.item.id}}>View credentials</dd.Interactive>
          <dd.Interactive @route="role" @models={{array this.scope list.item.id}}>View role</dd.Interactive>
          {{#if list.item.updatePath.isPending}}
            <dd.Generic>
              <LoadingDropdownOption />
            </dd.Generic>
          {{else}}
            {{#if list.item.updatePath.canUpdate}}
              <dd.Interactive @route="role.edit" @models={{array this.scope list.item.id}}>Edit role</dd.Interactive>
            {{/if}}
            {{#if list.item.updatePath.canDelete}}
              <dd.Interactive
                @color="critical"
                {{on "click" (fn (mut this.roleToDelete) list.item)}}
                data-test-confirm-action-trigger
              >Delete role</dd.Interactive>
            {{/if}}
          {{/if}}
        </Hds::Dropdown>
        {{#if (eq this.roleToDelete list.item)}}
          <ConfirmModal
            @color="critical"
            @confirmMessage="Are you sure you want to delete {{this.roleToDelete.id}}?"
            @onConfirm={{action
              (perform
                Item.callMethod
                "destroyRecord"
                this.roleToDelete
                (concat "Successfully deleted role " this.roleToDelete.id)
                (concat "There was an error deleting the role " this.roleToDelete.id)
                (action "refresh")
              )
            }}
            @onClose={{fn (mut this.roleToDelete) null}}
          />
        {{/if}}
      </Item.menu>
    </ListItem>
  {{else}}
    <ListItem as |Item|>
      <Item.content>
        There are no roles that match
        {{this.filter}}, press
        <kbd>ENTER</kbd>
        to add one.
      </Item.content>
    </ListItem>
  {{/if}}
</ListView>